<template>
  <div>
    <div class="content_div">
      <div class="info_table">
        <el-table
          :data="tableData"
          height="100%"
          border
          :header-cell-style="{ background: '#EDEDED', color: '#666666', textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
          @row-click="onClickRow"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="xh" label="序号" width="70px"></el-table-column>
          <el-table-column prop="description" :label="'其他' + typeText + '类型'" min-width="100px"></el-table-column>
          <el-table-column prop="action" label="操作" min-width="80px">
            <template slot-scope="scope">
              <div v-if="scope.row.xhState"></div>
              <div v-else class="index_input">
                <i
                  class="el-icon-edit-outline"
                  style="font-size: 16px;color:#1B93F9"
                  @click="onEditType(scope.row)"
                ></i>
                <el-popconfirm
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定要删除该类型吗？"
                  @confirm="onDeleteType(scope.row)"
                >
                  <i slot="reference" class="el-icon-delete" style="font-size: 15px;color:#FF2626"></i>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="info_button">
        <el-button @click="onAddRow">新增</el-button>
        <div style="display: flex;">
          <el-button type="primary" @click="onSelectRow">确定</el-button>
          <el-button @click="onCancel">取消</el-button>
        </div>
      </div>
    </div>
    <el-dialog title="新增" :visible.sync="dialogVisible" width="400px" :append-to-body="true">
      <div style="padding: 20px 0;">其他{{typeText}}类型:</div>
      <el-input v-model="description"></el-input>
      <span slot="footer" class="info_button" style="justify-content: flex-end;">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmitAdd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getAction, postAction } from '../../api/manage';
import { formatPrice, formatNumber, formatMoney } from '../../utils';
export default {
  name: 'BasicInformation',
  computed: {
    ...mapGetters(['name']),
  },
  created () { },
  props: {
    titleName: String,
    // paymentData: Array,
    inOrOut: Number,
  },
  data () {
    return {
      typeText: '出库',
      dialogVisible: false, // 新增弹框
      description: '',
      tableData: [],
      multipleSelection: [], // 存储多选的数据
    }
  },
  watch: {
  },
  mounted () {
    this.typeText = this.inOrOut == 1 ? '入库' : '出库'
    this.getTypeList()
  },
  methods: {
    // 选中当前行
    onClickRow (row) {
      this.tableData.forEach((item) => {
        if (item.xh == row.xh) {
          item.xhState = false
        } else {
          item.xhState = true
        }
      })
      console.log(this.tableData);
    },
    // 选中后传递给父组件
    onSelectRow() {
      if (this.multipleSelection.length === 1) {
        this.$emit('onSelectData', this.multipleSelection[0])
      } else if (this.multipleSelection.length === 0) {
        this.$elMessage.error('请选择一条数据！')
      } else {
        this.$elMessage.error('最多只能选择一条数据！')
      }
    },
     // 触发表格多选按钮
     handleSelectionChange(val) {
      this.multipleSelection = val
    },
    dialogVisibleClose () {
      this.$emit('onCancelPayment')
    },
    // 新增数据中表格内输入框聚焦时选中
    focusinSelect () {
      event.target.select()
    },
    blurSelect (scope) {
      console.log(scope.row.price);
      scope.row.price = formatNumber(Math.abs(scope.row.price))
    },
    onAddRow () {
      this.activeId = ''
      this.description = ''
      this.dialogVisible = true
    },
    // 新增类型
    onSubmitAdd () {
      if (!this.description) {
        this.$elMessage.error('请输入类型')
      } else {
        let params = {
          description: this.description,
          type: this.inOrOut
        }
        if (this.activeId) {
          params.id = this.activeId
          this.editTypeRequest('/xghotherordertype/xghOtherOrderType/edit', params)
        } else {
          this.editTypeRequest('/xghotherordertype/xghOtherOrderType/add', params)
        }
      }
    },
    editTypeRequest (url, params) {
      postAction(url, params).then(res => {
        if (res.success) {
          this.getTypeList()
          this.$emit('onUpdataType')
          this.$elMessage.success(res.message)
          this.dialogVisible = false
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    getTypeList () {
      getAction('/xghotherordertype/xghOtherOrderType/list', { type: this.inOrOut }).then(res => {
        console.log(res);
        if (res.success) {
          let list = res.result || []
          this.tableData = list.map((item, index) => {
            item.xh = index + 1
            item.xhState = true
            return item
          })
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    onEditType (row) {
      this.activeId = row.id
      this.description = row.description
      this.dialogVisible = true
    },
    onDeleteType (row) {
      getAction('/xghotherordertype/xghOtherOrderType/delete', { id: row.id }).then(res => {
        console.log(res);
        if (res.success) {
          this.getTypeList()
          this.$emit('onUpdataType')
          this.$elMessage.success(res.message)
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    onCancel () {
      this.$emit('cancel')
    }
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  width: 100%;
  .el-dialog__body {
    padding: 15px;
  }
  .el-dialog__header {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding: 0 10px;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-dialog__headerbtn {
      position: static;
      .el-icon-close {
        color: #999;
        font-size: 20px;
      }
    }
  }
  .header_title {
    width: 100%;
    display: flex;
    align-items: center;
    .title_span {
      white-space: nowrap;
      font-size: 0.300019rem;
      color: #666;
      font-weight: 600;
    }
  }
}
.content_div {
  width: 100%;
  height: 100%;
  background: #fff;
  box-sizing: border-box;
  padding: 15px;
  .info_table {
    width: 100%;
    height: 300px;
    display: flex;
    ::v-deep .el-table {
      border: 1px solid #e3e3e3;
      border-bottom: none;
      box-sizing: border-box;
      td,
      th {
        padding: 0;
        font-size: 12px;
        color: #666;
        height: 30px;
        background: #fff;
      }
      th {
        background: #eeeeee;
      }
      .el-table__footer-wrapper {
        td {
          background: #eeeeee;
        }
      }
      .index_input {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        > i {
          margin: 0 5px;
        }
      }
      .el-table__body tr:hover > td {
        background-color: #e3f6ff;
      }
      //滚动条的宽度
      ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        background-color: #e5e5e5;
      }
      //滚动条的滑块
      ::-webkit-scrollbar-thumb {
        background-color: #c9c9c9;
      }
    }
  }
}
.info_button {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  ::v-deep .el-button {
    width: 60px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
  }
}
</style>